<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>好友界面</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link rel="stylesheet" href="/js/friend/css/style.css">
        <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
        <script src="/js/jquery/jquery.min.js"></script>
        <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
        <link rel="stylesheet" href="/css/reset.css" />
        <link rel="stylesheet" href="/css/myProfiles.css" />
        <script src="/js/plugins/jrender/jrender.js"></script>
        <script src="/js/common.js"></script>
    </head>
    <body>
    <div class="search-head">
        <div class="row nav-search">
            <div class="col">
                <a href="javascript:history.go(-1);">
                    <span><i class="fa fa-chevron-left" ></i></span>
                </a>
            </div>
            <div class="col">
                <span>我的好友</span>
            </div>
            <div class="col"></div>
        </div>
    </div>
    <hr/>

        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed b-line">
                <div class="aui-center">
                    <div class="aui-jop-search">
                        <i class="icon icon-search"></i>
                        <input type="text" placeholder="好友昵称">
                    </div>
                </div>
            </header>
            <section class="aui-scrollView">
                <div class="divHeight"></div>
                <div class="aui-expert-list">
                    <div render-loop="list">
                    <b  class="aui-flex" >
                        <div class="aui-expert-user">
                           <a render-key="list.id" render-fun="handle"> <img render-src="list.headImgUrl" alt=""></a>
                        </div>
                        <div class="aui-flex-box">
                            <h1 render-html="list.nickName">孙俪</h1>
                            <h3 render-html="list.place">江苏省-南京</h3>
                        </div>
                        <div class="aui-expert-chat">
                            <button class="chat" render-value="list.id">
                                <i class="icon icon-news"></i>
                                私聊
                            </button>
                            <span class="badge badge-danger badge-pill" render-html="list.chatNumber"></span>
                        </div>
                    </b>
                </div>
                </div>
            </section>
        </section>

    </body>
<script>
    $(function () {
        $.get("/users/userFriend",function (data) {
            $(".aui-expert-list").renderValues(data,{
                handle: function (ele,val) {
                    ele.href = "/userProfiles.html?id="+val;
                }
            });
        });
        $("section").on("click",".chat",function(){
            sessionStorage.setItem("state",1);
            var id=$(this).val();
                location.href="chat.html?id="+id
        });


    })

</script>
</html>
